<template>
  <div style="width:100%;height:100%;">
    <div class="dialog3Content">
      <div class="column1">
        <Model1 ref="Model1" :ctype="type" :rail-types="railTypes" />
      </div>
      <div class="column1">
        <Model2 ref="Model2" :ctype="type" :rail-types="railTypes" />
      </div>
    </div>
  </div>
</template>
<script>
import Model1 from './dialog3/model1.vue'
import Model2 from './dialog3/model2.vue'

export default {
  components: {
    Model2,
    Model1
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  watch: {
    type() {
      console.log(this.type)
      this.$nextTick(() => {
        this.$refs.Model1.init()
        this.$refs.Model2.init()
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.dialog3Content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.column1 {
  width: 49.5%;
  background: #0f1f56;
}
</style>
